<template>
	<div id="relevant">
		<h2>{{title}}
		    <span class="underline"></span>
		</h2>

		<p class='txt' v-for='(item,index) in txt' :key="index">{{item}}</p>
		<div class='imgs_box clearfix'>
			<div class='imgs' v-for="(item,index) in srcs" :key="index" v-if="index != srcs.length-1" >
				<p class='img_div' >
					<span >{{item.ptext}}</span>
					<span><b>{{item.ppt}}</b></span>
				</p>
				<img :src="item.imgUrl" alt="" />
				<div class="bk"></div>
				

			</div>
			<div class='imgs' v-for="(item,index) in srcs" :key="index" v-if="index == srcs.length-1" >
				<p class='img_div' style="padding-top:60px;">
					<span v-for="(ite,idx) in item.ppt" :key="idx">{{ite}}</span><br/>
				</p>
				<img :src="item.imgUrl" alt="" />
				<div class="bk"></div>
				

			</div>
			<img src="" alt="" />
		</div>
	</div>
</template>

<script>
export default {
  name: "Relevant",
  data() {
    return {
      title: "关于美肌工坊",
      srcs: [
        {
          imgUrl: "../../../../static/imgs/img2/t1.png",
          ptext: "中国",
          ppt: "优选品牌"
        },
        {
          imgUrl: "../../../../static/imgs/img2/t2.png",
          ptext: "科技",
          ppt: "美容领导牌"
        },
        {
          imgUrl: "../../../../static/imgs/img2/t3.png",
          ptext: "人气",
          ppt: "明星品牌"
        },

        {
          imgUrl: "../../../../static/imgs/img2/t4.png",
          ptext: "中国国家指定培训网",
          ppt: "指定培训网点"
        },
        {
          imgUrl: "../../../../static/imgs/img2/t5.png",
          ppt: ["全国皮肤管理师", "专业技能培训", "管理办公室", "主任单位"]
        }
      ],
      txt: [
        `美肌工坊，互联网科技美容连锁品牌，隶属于广州美肌数字科技有限公司,成立于2016年。目前已拥有600+ 终端运营网点服务客户达10余万人,辐射全国80多个城市。其创建肤质、肤色、肤龄的三维皮肤管理模式,将物理学光电仪器与皮肤科功能性护肤品相结合,为用户创建了“智能、科技、专业、透明”的美容消费新场景。“小而美、小而精、小而专”的店铺定位,将创造美业消费升级的新风口,全方位满足85、90互联网人群的美容新需求,品牌致力于通过5年时间,发挥品牌创新能力及资本优势,将终端网点数量扩大至3000家，同时通过信息系统和新快捷智能美容消费场景的打造,形成“智能硬件十平台十终端体验”的大数据驱动的新型美容消费新生态。`
      ]
    };
  }
};
</script>

<style scoped lang="scss">
#relevant {
  margin-top: 53px;
  width: 100%;
  h2 {
    width: 100%;
    text-align: center;
    font-size: 40px;
    color: #f5855f;
    margin-bottom: 39px;
    .underline {
      display: block;
      width: 54px;
      height: 2px;
      background-color: #f5855f;
      margin: 0 auto;
    }
  }
  .txt {
    text-indent: 2em;
    width: 1108px;
    margin: 0 auto;
    width: 1108px;
    font-size: 22px;
    color: rgba(118, 118, 118, 1);
    line-height: 35px;
    word-spacing: 20px;
  }
  .imgs_box {
    padding-top: 70px;
    width: 100%;
    .imgs {
      float: left;
      box-shadow: 10px 10px 5px #888888;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        transition: all 0.5s ease-in;
      }
      p {
        position: absolute;
        top: -100%;
        display: flex;
        justify-content: center;
        transform: rotate(180deg);
        align-items: center;
        width: 100%;
        height: 100%;

        color: #fff;
        text-align: center;
        transition: all 0.5s ease-in;
        z-index: 9999;
        font-size: 29px;
      }
      .bk {
        width: 100%;
        height: 100%;
        background-color: rgba(247, 133, 90, 0.9);
        transition: all 0.5s ease-in;
      }
    }
    .imgs {
      overflow: hidden;
      .img_div {
        display: flex;
        justify-items: center;
        flex-direction: column;
      }
    }
    .imgs:hover p {
      transform: translate(0, 100%);
    }
    .imgs:hover .bk {
      transform: translate(0, -100%);
    }

    .imgs:nth-child(1) {
      width: 284px;
      height: 231px;
      margin-left: 17px;
    }
    .imgs:nth-child(2) {
      margin-top: 124px;
      width: 397px;
      height: 321px;
      margin-left: 60px;
    }
    .imgs:nth-child(3) {
      width: 284px;
      height: 231px;
      margin-left: 34px;
    }
    .imgs:nth-child(4) {
      width: 413px;
      height: 341px;
      background-color: #f7855a;
      margin-top: 128px;
      margin-left: 53px;
    }
    .imgs:nth-child(5) {
      width: 284px;
      height: 231px;
      margin-left: 35px;
    }
  }
}
</style>